<!DOCTYPE html>
<!--@version $Id: BasicExample.html 3314 2015-07-10 18:28:45Z dcollins $-->

<html lang="en">
<head>
    <!--NOTE: Most Web World Wind examples use jquery, Bootstrap and requirejs but those technologies are NOT-->
    <!--required by Web World Wind. See SimplestExample.html for an example of using Web World Wind without them.-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles/style.css">
    <link rel="stylesheet" href="perfectscrollbar/perfect-scrollbar.min.css"/>
    <link rel="stylesheet" href="styles/bulma.css"/>

    <script src="perfectscrollbar/perfect-scrollbar.jquery.min.js"></script>
    <title>SPACEBIRDS</title>
</head>
<body>
<style media="screen" type="text/css" scoped>
    body {
        background: url('assets/images/space.jpeg') no-repeat center center fixed;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>
<canvas id="canvasOne" style="width: 100%; height:100%;">
    Your browser does not support HTML5 Canvas.
</canvas>

<div>
    Representation: <a href="javascript:toggleRepresentation();" id="representation">3D</a>
</div>
    <br/>

    <div class="coolLogo">
        <img src="assets/images/spacebirdlogo.png" width="25px">
        <h3 style="font-size: 20px; display: inline;">SPACEBIRDS</h3>
    </div>

    <br/>
    <div id="custom-search-input">
        <div class="input-group col-md-12">
            <input type="text" class="search-query form-control" placeholder="Search" style="color: rgb(230,230,230)" />
        </div>
    </div>

    <br/>

    <div  style="width: 15%; background-color: rgba(91, 91, 91, 0.41);">
        <div class="panel panel-default " style="text-indent: 0px; height: 34px !important;">
            <!-- Default panel contents -->
            <div class="coolLogo" style="display: inline; color: rgb(230,230,230)">Types
                <span id="type_heading" class="glyphicon glyphicon-plus"
                     style="float: right;cursor:pointer">
                </span>
            </div>

            <!-- List group -->

            <ul class="list-group panel panel-default" style="background-color: rgba(91, 91, 91, 0.41) !important; position: absolute; left: 15%; display: inline">
                <div id="type_body" style="display: none;width: 150px;">
                <li class="list-group-item">
                    Rockets
                    <div class="material-switch pull-right">
                        <input id="type_rockets" name="type_rockets" type="checkbox"/>
                        <label for="type_rockets" class="label-default"></label>
                    </div>
                </li>
                <li class="list-group-item">
                    Payloads
                    <div class="material-switch pull-right">
                        <input id="type_payloads" name="someSwitchOption001" type="checkbox"/>
                        <label for="type_payloads" class="label-default"></label>
                    </div>
                </li>
                <li class="list-group-item">
                    Debris
                    <div class="material-switch pull-right">
                        <input id="type_debris" name="someSwitchOption001" type="checkbox"/>
                        <label for="type_debris" class="label-default"></label>
                    </div>
                </li>
                </div>
            </ul>

        </div>
    </div>

    <div  style="width: 15%; background-color: rgba(91, 91, 91, 0.41)">
        <div class="panel panel-default " style="text-indent: 0px; height: 34px !important;">
            <!-- Default panel contents -->
            <div class="coolLogo" style="display: inline; color: rgb(230,230,230)">Orbit Range
                <span id="orbit_heading" class="glyphicon glyphicon-plus"
                      style="float: right;cursor:pointer">
                </span>
            </div>

            <!-- List group -->

            <ul class="list-group panel panel-default" style="background-color: rgba(91, 91, 91, 0.41) !important; position: absolute; left: 15%; display: inline;">
                <div id="orbit_body" style="display: none; width: 150px">
                    <li class="list-group-item">
                        LEO
                        <div class="material-switch pull-right">
                            <input id="leo" name="someSwitchOption001" type="checkbox"/>
                            <label for="leo" class="label-default"></label>
                        </div>
                    </li>
                    <li class="list-group-item">
                        MEO
                        <div class="material-switch pull-right">
                            <input id="meo" name="someSwitchOption001" type="checkbox"/>
                            <label for="meo" class="label-default"></label>
                        </div>
                    </li>
                    <li class="list-group-item">
                        HEO
                        <div class="material-switch pull-right">
                            <input id="heo" name="someSwitchOption001" type="checkbox"/>
                            <label for="heo" class="label-default"></label>
                        </div>
                    </li>
                </div>
            </ul>

        </div>
    </div>


    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle coolLogo" type="button" id="type_dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Type
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="type_dropdown">
            <li><a href="#">Rockets</a></li>
            <li><a href="#">Payloads</a></li>
            <li><a href="#">Debris</a></li>
        </ul>
    </div>


</body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<!-- <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> -->
<script src="util/lastworldwindlib.js"></script>
<script src="util/LayerManager.js"></script>
<script src="util/Satellite.js"></script>
<script src="util/rewritefunctions.js"></script>
<script src="SatTrackerRewrite.js"></script>
</html>
